<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="s"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<link href="<c:url value="/resources/css/common.css" />" rel="stylesheet">
<s:web pageName="seller_review">
<jsp:attribute name="headPart">
<title>${d.sellerName}怎么样</title>
<style>
.seller-name{
	font-size: 30px;
	font-weight: bold;
	line-height: 46px;
	margin: 20px 0;
}
.review-box{
	margin-top: 50px;
	border-radius: 10px;
	width: 100%;
	height: 150px;
	border: 1px solid grey;
	padding: 10px;
}
.seller-score{
	width: 200px; 
	height: 42px;
}
.comments{
	float: right;
}
#div_sterren_container {
    position: relative;
    height: 44px;
    width: 202px;
}
.div_sterren {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 42px;
    width: 200px;
    background: url(<c:url value="/resources/images/sterren2.png"/>);
}
#s00 {background-position: 0 -0px;}
#s05 {background-position: 0 -42px;}
#s10 {background-position: 0 -84px;}
#s15 {background-position: 0 -126px;}
#s20 {background-position: 0 -168px;}
#s25 {background-position: 0 -210px;}
#s30 {background-position: 0 -252px;}
#s35 {background-position: 0 -294px;}
#s40 {background-position: 0 -336px;}
#s45 {background-position: 0 -378px;}
#s50 {background-position: 0 -420px;}
#kies_sterren {
    position: absolute;
    left: 0;
    top: 0;
    height: 42px;
    width: 200px;
}
</style>
<script>
$( document ).ready(function() {
    var geclickt = false;
    $( "#kies_sterren" ).mousemove(function( event ) {
        if (! geclickt) {
            zet_sterren(event);
        }
    });
    $( "#kies_sterren" ).click(function( event ) {
        zet_sterren(event);
        geclickt = true;
    });
    function zet_sterren(event) {
        $( ".div_sterren" ).hide(0);
        var x = event.clientX - $( "#kies_sterren" ).offset().left;
        x = Math.floor(x / 20) + 1;
        if (x>10){x=10}
        var nr = (x * 5).toString();
        if (nr.length == 1) {nr = "0" + nr;}
        
        $("#s" + nr).show(0);
        $( "#aantal_sterren" ).val(nr);
    }
    $( ".div_sterren" ).hide();    
    $( "#s00" ).show();    
});
function inputComments(ele, len){
	var x = 500 - len;
	if(x < 0){
		ele.value = window.comment
		return;
	}
	$('#words').text(x);
}
function remember(text){
	window.comment = text;
}
</script>
</jsp:attribute>
<jsp:body>
	<div class="seller-name">${d.sellerName}
		<div class="seller-score" style="float:left; background: url(<c:url value="/resources/images/sterren2.png"/>) 0 -${offset * 42}px;"></div>
	</div>
	<div>
		<div>城市：${d.city}</div>
		<div>地址：${d.sellerAddress}</div>
		<div>电话：${d.phone}</div>
	</div>
	<div class="review-box">
		<div id="div_sterren_container">
            <div id="s00" class="div_sterren"></div>
            <div id="s05" class="div_sterren"></div>
            <div id="s10" class="div_sterren"></div>
            <div id="s15" class="div_sterren"></div>
            <div id="s20" class="div_sterren"></div>
            <div id="s25" class="div_sterren"></div>
            <div id="s30" class="div_sterren"></div>
            <div id="s35" class="div_sterren"></div>
            <div id="s40" class="div_sterren"></div>
            <div id="s45" class="div_sterren"></div>
            <div id="s50" class="div_sterren"></div>
            <div id="kies_sterren"></div>
        </div>
        <form method="post" action="<c:url value="/c/${d.id}"/>">
	        <input type="hidden" id="aantal_sterren" name="score" value="0" />
	        <div class="row">
		        <div class="col-md-10">
		        	<textarea onkeydown="remember(this.value)" onkeyup="inputComments(this, this.value.length)" name="comments" style="height: 70px; width: 100%"></textarea>
		        	<div>还可以输入<span id="words">500</span>字</div>
		        </div>
		        <div class="col-md-2" style="padding-top: 40px;">
		        	<button type="submit" class="btn btn-primary">评论</button>
		        </div>
	        </div>
        </form>
	</div>
	
	<c:forEach var="i" items="${reviews}">
		<div class="review-box">
			 <div class="col-md-4">
				<div class="seller-score" style="background: url(<c:url value="/resources/images/sterren2.png"/>) 0 -${i.score/5 * 42}px;"></div>
				<div class="meta">
					${i.name}<br/>
					<fmt:formatDate value="${i.date}" pattern="yyyy-MM-dd"></fmt:formatDate>
				</div>
			</div>
			<div class="col-md-8">${i.comments}</div>
		</div>
	</c:forEach>
</jsp:body>
</s:web>
